// @ts-nocheck
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getChannels, changeActive } from "../store/actions/channel";
import classNames from "classnames";
const Channel = () => {
  const dispatch = useDispatch();
  // 组件第一次渲染，获取频道数据
  // 通过dispatch分发一个获取频道数据的action即可
  useEffect(() => {
    dispatch(getChannels());
  }, [dispatch]);

  // 获取redux中的频道列表数据
  const { list, activeId } = useSelector((state) => state.channel);

  return (
    <ul className="category">
      {list.map((item) => (
        <li
          className={classNames({ select: item.id === activeId })}
          key={item.id}
          onClick={() => dispatch(changeActive(item.id))}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
};

export default Channel;
